<template>
    <div class="user_content">
        <h1 v-if="userInfo.fd_sta_name" class="user_name">{{userInfo.fd_sta_name}}<span>{{'('+userInfo.fd_cuslevel_name+')'}}</span></h1>
        <h1 v-else class="user_name">暂无数据</h1>
        <div class="user_info">
            <img v-if="userInfo.fd_sta_photo" :src="userInfo.fd_sta_photo" alt="个人头像">
            <img v-else :src="pic" alt="个人头像">
            <ul>
                <li>组织：{{userInfo.organic_name}}</li>
                <li>手机号：{{userInfo.fd_sta_mobile}}</li>
                <li>在职天数：{{userInfo.fd_sta_stay_days}}</li>
                <li>历史招单数：{{userInfo.fd_sta_merchants}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'UserInfo',
    data(){
        return {
            pic:require('../assets/images/morentouxiang.png')
        }
    },
    props:{
        userInfo:{
            type:Object,
            default:{}
        }
    }
}
</script>
<style lang="less" scoped>
.user_content{
    width: 100%;
    height: 190px;
    background: #785c50;
    padding: 0 15px;
    box-sizing: border-box;
    border-radius: 10px;
    color: #fff;
    .user_name{
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #ff6618;
        font-size: 16px;
        span{font-size: 14px;margin-left: 10px;font-weight: normal;}
    }
    .user_info{
        width: 100%;
        height: 140px;
        display: flex;
        img{
            display: block;
            width: 90px;
            height: 90px;
        }
        ul{
            height: auto;
            padding-left: 30px;
            box-sizing: border-box;
            overflow: hidden;
            li{
                width: 100%;
                margin-bottom: 5px;
                padding: 0;
                font-size: 12px;
                color: #d6cecc;
                text-align: left;
            }
        }
    }
    
}
</style>